<template>
  <div class="layout-padding" style="max-width: 600px;">
      <br>
       <h6 style="text-align: center;" v-if="notifyMsgs.length<=0">
       <q-icon name="insert emoticon" color="blue"/> 您好，当前没有通知</h6>
       <!--    :text="notify.remark | contentLengthWrap" -->
       <common-compo v-else v-on:trigger-refresh="refresher" :enableScrollLoading="scrollLoading" enableToTop>
          <div slot="content">
            <q-chat-message
                v-for="(notify) in notifyMsgs" :key="notify.id"
                :label="notify.createdDate | formatDateToTime"
                text-color="white"
                bg-color="black"
                avatar="statics/hg-broadcast.png"
                :text="notify.remark | contentLengthWrap"
              />
          </div>
       </common-compo>
  </div>
</template>

<script>
import { QChatMessage, QIcon } from "quasar";
import commonCompo from "../common-compo";
import notifyApi from "../../../https/notifyApi";
export default {
  components: {
    commonCompo,
    QChatMessage,
    QIcon
  },
  data() {
    return {
      scrollEle:null,
      notifyMsgs: [],
      page: 0,
      totalPages: 0,
      scrollLoading: false
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      const _prelength = this.notifyMsgs.length
      notifyApi
        .list("?isSys=true")
        .then(res => {
          const { status, data:{content,totalPages}} = res;
          if (status == 200 && content) {
            this.totalPages = totalPages;
            this.notifyMsgs = this.notifyMsgs.concat(content);
            this.isStopRefresher(_prelength,this.notifyMsgs.length);
          }
        })
        .catch(err => {});
    },
    refresher(_ele) {
      this.scrollEle = _ele;
      this.scrollLoading = true;
      this.page++;
      console.log("控制滚动元素：page=",this.page,",totalPages=",this.totalPages);
      if (this.page > this.totalPages-1) {
        _ele.stop();
        this.scrollLoading = false;
        return;
      }
      this.loadData();
    },
    isStopRefresher(_prelength,_suflength) {
      console.log("前,", _prelength, "后,", _suflength);
      if (_prelength == _suflength) {
        console.log('停止滚动');
        this.scrollEle.stop();
        this.scrollLoading = false;
      }
    }
  }
};
</script>
